<script setup lang="ts">
import { nextTick, onMounted, ref, useTemplateRef } from "vue";
import type { ITea } from "../../types/ITea.ts";
import { animate, onScroll } from "animejs";

const props = defineProps<{
  obj: ITea[];
}>();
// 模板引用
const wrapper = useTemplateRef("wrapper");
const ul = useTemplateRef("ul");
// 轮播
const crtImgIndex = ref(0);
// ul的宽度 用来设置每一个li的宽度
const ulWidth = ref("");
const nextImgButtonStyle = ref({ animation: "none" });
// intervalId
let interval: number = 0;


const nextImgIndex = function() {
  crtImgIndex.value = (crtImgIndex.value + 1) % props.obj.length;
};
const prevImgIndex = function() {
  crtImgIndex.value =
    (crtImgIndex.value + props.obj.length - 1) % props.obj.length;
};

// 解除定时器
function removeInterval() {
  if (interval) {
    clearInterval(interval);
    nextImgButtonStyle.value = { animation: "none" };
  }
}

// 开启
function addInterval() {
  nextTick(() => {
    nextImgButtonStyle.value = { animation: "width-40 7s" };
    interval = setInterval(() => {
      nextImg();
    }, 7000);
  });
}

function nextImg() {
  nextImgIndex();
  removeInterval();
  addInterval();
}

function prevImg() {
  prevImgIndex();
  removeInterval();
  addInterval();
}

function setUlWidth() {
  if (ul.value) {
    ulWidth.value = `${window.innerWidth}px`;
  }
}


onMounted(() => {
  // 初始化
  window.addEventListener("resize", setUlWidth);
  addInterval();
  if (wrapper.value && ul.value) {
    animate(wrapper.value, {
      padding: { from: "0", to: "36px 10%" },
      duration: 3000,
      autoplay: onScroll({
        enter: "center-=125px center",
        leave: "center+=100px bottom+=150px",
        sync: true,
      })
    });
    animate(ul.value, {
      borderRadius: { from: 0, to: "45px" },
      duration: 3000,
      autoplay: onScroll({
        enter: "center-=125px center",
        leave: "center+=100px bottom+=150px",
        sync: true,
      })
    })
  }
  setUlWidth();


});

</script>

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="imgs" ref="ul">
      <template v-for="(item, index) in obj">
        <Transition>
          <li
            class="img-wrapper"
            :style="{ width: ulWidth }"
            v-show="index == crtImgIndex">
            <img class="img-picture" :src="item.imgSrc" :alt="item.title" />
            <div class="img-description">
              <h2 class="img-title">{{ item.title }}</h2>
              <p class="img-subtitle">{{ item.description }}</p>
            </div>
          </li>
        </Transition>
      </template>
    </ul>
    <div class="toolbar">
      <button class="btn" @click="prevImg">&lt;</button>
      <button class="btn bigBtn">了解更多</button>
      <button
        class="btn"
        @click="() => { nextImg(); }"
        :style="{ position: 'relative', overflow: 'hidden', zIndex: 5 }">
        &gt;
        <span
          class="nextButtonBackground"
          :style="nextImgButtonStyle"
        ></span>
      </button>
    </div>
  </div>
</template>
<style>
@keyframes width-40 {
  from {
    width: 0;
  }
  to {
    width: 40px;
  }
}
</style>
<style scoped>
.v-enter-active,
.v-leave-active {
  transition: all 0.3s;
  position: absolute;
}

.v-enter-from {
  transform: translateY(-600px);
}

.v-enter-to,
.v-leave-from {
  transform: translateY(0);
}

.v-leave-to {
  transform: translateY(600px);
}

.nextButtonBackground {
  top: 0;
  left: 0;
  background: #ffbe4b;
  position: absolute;
  display: block;
  height: 40px;
  animation: width-40 7s;
  z-index: -1;
}

.wrapper {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.imgs {
  background: #ffbe4b;
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}

.toolbar {
  position: absolute;
  right: 12%;
  bottom: 70px;
  width: 220px;
  display: flex;
  justify-content: space-between;
}

.img-description {
  position: absolute;
  left: 5%;
  top: 2%;
  width: 100%;
}

.img-title {
  font-size: 5rem;
  color: #d7a855;
}

.img-subtitle {
  color: white;
  font-size: 1.5rem;
  width: 40%;
}

.img-picture {
  height: 600px;
  width: 100%;
}
</style>
